<template>
  <div v-if="filminfo">
    <detail-header v-top :title='filminfo.name'></detail-header>
    <div :style=" { background:'url('+ filminfo.poster +') center center/cover border-box border-box no-repeat' } "
      style="height: 200px;"
    ></div>

    <h3>{{filminfo.name}}-<span>{{filminfo.filmType.name}}</span></h3>
    <div>
      {{filminfo.category}}
    </div>
    <div>
      {{filminfo.premiereAt | dateAtFilter}}
    </div>
    <div>{{filminfo.nation }} | {{filminfo.runtime}} 分钟</div>
    <div class="film-synopsis" :class=" isShow ? '':'synopsis'">{{filminfo.synopsis}}</div>
    <div style="text-align:center;" @click="isShow=!isShow"><i class="iconfont" :class="isShow?'icon-xiangshang':'icon-xiangxia'"></i></div>
    <h3>演职人员</h3>
    <detail-swiper :perslide='4' swiperclass="swiper-actors">
      <div class="swiper-slide" v-for="(data, index) in filminfo.actors" :key="index">
        <img :src="data.avatarAddress">
        <div style="text-align:center">
          <div>{{data.name}}</div>
          <div>{{data.role}}</div>
        </div>
      </div>
    </detail-swiper>
    <h3>剧照</h3>
    <detail-swiper :perslide='3' swiperclass="swiper-photos">
      <div class="swiper-slide" v-for="(data, index) in filminfo.photos" :key="index">
        <div :style=" { background:'url('+ data +') center center/cover border-box border-box no-repeat' } "
          style="height: 100px;"
          @click="handlePreview(index)"
        ></div>
      </div>
    </detail-swiper>
  </div>
</template>

<script>
import http from '@/util/http'
import Vue from 'vue'
import moment from 'moment'
import detailSwiper from './detail/DetailSwiper'
import detailHeader from './detail/DetailHeader'
import { ImagePreview } from 'vant'
import { mapMutations } from 'vuex'

Vue.directive('top', {
  inserted (el) {
    el.style.display = 'none'
    window.onscroll = () => {
      if ((document.body.scrollTop || document.documentElement.scrollTop) > 30) {
        el.style.display = 'block'
      } else {
        el.style.display = 'none'
      }
    }
  },
  unbind () {
    window.onscroll = null
  }
})

Vue.filter('dateAtFilter', (date) => {
  return moment(date * 1000).format('YYYY-MM-D')
})
export default {
  name: '',
  components: {
    detailSwiper,
    detailHeader
  },
  data () {
    return {
      filminfo: null,
      isShow: false
    }
  },

  methods: {
    handlePreview (index) {
      ImagePreview({
        images: this.filminfo.photos,
        startPosition: index,
        loop: false,
        closeable: true,
        closeIconPosition: 'top-left'
      })
    },
    ...mapMutations('TabbarModule', ['show', 'hide'])
  },
  mounted () {
    this.hide()
    // console.log('利用获取的id，ajax请求后端的接口', this.$route.params.myid)
    // console.log('利用获取的id，ajax请求后端的接口', this.$route.query.id)
    http({
      url: `https://m.maizuo.com/gateway?filmId=${this.$route.query.id}&k=6526178`,
      headers: {
        'X-Host': 'mall.film-ticket.film.info'
      }
    }).then(res => {
      // console.log(res.data.data.film)
      this.filminfo = res.data.data.film
    })
  },
  beforeDestroy () {
    this.show()
  }
}

</script>
<style scoped lang='less'>
.synopsis{
  height: 40px;
  overflow: hidden;
}
.film-synopsis, .synopsis{
  transition: all 1s ease;
}
</style>
